<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    
    <style type="text/css">
    .container {
        display: flex;
        flex-wrap: wrap;
        width: 238px;
        margin-top: 10px;
    }
    
    .cell {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 25px;
        height: 25px;
        border: 1px solid #aaa;
        margin-right: -1px;
        margin-bottom: -1px;
    }
    
    .cell:nth-child(3n) {
        margin-right: 0;
    }
    
    .cell:nth-child(27n) {
        margin-bottom: 0;
    }
    
    .cell-move {
        transition: transform 1s;
    }
    </style>
 </head>
<body>
    <div id="sudoku-demo" class="demo">
        <h1>数独</h1>
        <button @click="shuffle">
            生成
        </button>
        
        <transition-group name="cell" tag="div" class="container">
            <div v-for="cell in cells" :key="cell.id" class="cell">
                {{ cell.number }}
            </div>
        </transition-group>
    </div>
    <script type='text/javascript'>
    //<![CDATA[
    new Vue({
            el: '#sudoku-demo',
            data: {
                cells: Array.apply(null, {
                        length: 81
                    })
                    .map(function(_, index) {
                        return {
                            id: index,
                            number: index % 9 + 1
                        }
                    })
            },
            methods: {
                shuffle: function() {
                    this.cells = _.shuffle(this.cells)
                }
            }
        })
        //]]>
    </script>
</body>

</html>
